{extend name="base"/}
{block name="resources"}
<style>
    .ns-prompt-block .ns-prompt-box {
        position: absolute;
        top: -20px;
        left: 32px;
        border: 1px solid #e4e4e4;
        width: 280px;
        text-align: left;
        border-radius: 5px;
        background-color: #FFFFFF;
        padding: 15px;
        box-sizing: border-box;
        word-break: break-all;
        color: #666666;
        line-height: 24px;
        z-index: 999;
        display: none;
    }
    .ns-prompt-block .ns-prompt-con {
        width: 100%;
        word-break: break-all;
        white-space: normal;
    }
    .ns-form {margin-top: 0;}
    .upload_img_square {
        display: inline-block;
        width: 80px;
        height: 80px;
        line-height: 78px;
        font-size: 30px;
        color: #bbbbbb;
        cursor: pointer;
        border: 1px dashed #ccc;
        border-radius: 5px;
        text-align: center;
        margin-bottom: 10px;
        margin-right: 10px;
    }

    .upload_img_square_item {
        display: inline-block;
        float: left;
        width: 80px;
        height: 80px;
        position: relative;
        border: 1px dashed #e5e5e5;
        text-align: center;
        transition: background-color 0.3s ease;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .upload_img_square_item:hover {
        border: 1px dashed #ff8143;
        border-radius: 5px;
    }
    .upload_img_square_item:hover .operation {
        display: block;
    }
    .upload_img_square_item .img-wrap {
        width: 80px;
        font-size: 0;
        line-height: 79px;
        border-radius: 5px;
        overflow: hidden;
    }
    .upload_img_square_item .img-wrap img {
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
    .upload_img_square_item .operation {
        position: absolute;
        top: 0;
        z-index: 10;
        width: 80px;
        height: 80px;
        line-height: 80px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        cursor: pointer;
        text-align: center;
        display: none;
    }
    .upload_img_square_item .operation i {
        font-size: 20px;
        margin-left: 10px;
    }
    .upload_img_square_item .operation i:first-child {
        margin-left: 0;
    }
    .upload_img_square_item .operation .replace_img {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 24px;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        line-height: 24px;
    }

    /* 展示视频 */
    .video-thumb {
        display: block;
        float: left;
        width: 250px;
        height: 120px;
        position: relative;
    }

    .video-thumb span {
        width: 10px;
        height: 10px;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
        background-image: url('../img/video_thumb_close.png');
        background-size: 100%;
        z-index: 100;
    }

    .video-thumb span.hide {
        display: none;
    }

    .video-thumb > #goods_video, .video-thumb > #temp_goods_video {
        width: 100% !important;
        height: 121px;
        background: #ffffff;
    }

    .video-thumb > #temp_goods_video {
        display: none;
    }
    .layui-table-box{
        height: 300px;
        overflow-y: scroll;
    }

    .layui-form{
        padding:0px !important;
    }
</style>
{/block}
{block name="main"}
<div class="layui-form ns-form" lay-filter="storeform" >
    <div class="layui-card ns-card-common ns-card-brief">
        <div class="layui-card-header">
            <span class="ns-card-title">房间信息</span>
        </div>
        <div class="layui-card-body">

            {if $direct == 1}
            <div class="layui-form-item">
                <label class="layui-form-label">酒店类型：</label>
                <div class="layui-input-block">
                    <span class="layui-input ns-len-long" style="border: 0px;">自营</span>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">关联房间：</label>
                <div class="layui-input-block">
                    <div class="coupon-item coupon">

                        <div class="discount-cont">
                            <div><a href="javascript:;" class="ns-text-color select-coupon">选择房间</a></div>
                            <div>
                                <table class="layui-table" lay-skin="nob">
                                    <colgroup>
                                        <col width="30%">
                                        <col width="50%">
                                        <col width="20%">
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>房间编号</th>
                                        <th>房间名称</th>
                                        <th style="text-align:center;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {foreach $info.room_no_list as $k => $vo}
                                    <tr data-coupon="{$vo.baoyu_id}">
                                        <td>{$vo.baoyu_id }</td>
                                        <td>{$vo.roomNo }</td>
                                        <td style="text-align:center;"><a href="javascript:;" onclick="deleteCoupon(this)" class="ns-text-color">删除</a></td>
                                    </tr>
                                    {/foreach}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/if}

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>房间名称：</label>
                <div class="layui-input-block">
                    <input name="room_name" type="text" value="{$info.room_name}" lay-verify="required" placeholder="请输入房间名称" autocomplete="off" class="layui-input ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>类型：</label>
                <div class="layui-input-inline ns-len-mid area-select">
                    <select name="type_id" lay-filter="type_id" lay-verify="type_id">
                        {foreach $room_type_list as $room_type_list_k=> $room_type_list_v}
                        <option value="{$room_type_list_v.baoyu_type_id}" {if $room_type_list_v.baoyu_type_id == $info.type_id} selected {/if}>{$room_type_list_v.type_name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            {if $direct == 0}
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>库存：</label>
                <div class="layui-input-block">
                    <input name="stock" type="number" value="{$info.stock}"  {if $direct == 0}lay-verify="required" {/if} placeholder="输入库存" autocomplete="off" class="layui-input ns-len-short">
                </div>
<!--                <div class="ns-word-aux">注意,关联房间数量需和填写库存一致</div>-->
            </div>
            {/if}

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>售价：</label>
                <div class="layui-input-block">
                    <input name="price" type="number" lay-verify="required" value="{$info.price}" placeholder="请输入售价" autocomplete="off" class="layui-input ns-len-short">
                </div>
            </div>

        </div>

        <div class="layui-card-header">
            <span class="ns-card-title">图文信息</span>
        </div>

        <div class="layui-card-body">
            <div class="layui-form-item js-new-attr-list">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block">
                    <div class="layui-form" style="width: 70%;">
                        <table class="layui-table">
                            <colgroup>
                                <col width="30%" />
                                <col width="20%" />
                                <col width="10%" />
                            </colgroup>
                            <thead>
                            <tr>
                                <th>标签名称</th>
                                <th class="ns-prompt-block">
                                    排序
                                    <div class="ns-prompt">
                                        <i class="iconfont iconwenhao1"></i>
                                        <div class="ns-prompt-box">
                                            <div class="ns-prompt-con">设置排序，改变标签展示顺序</div>
                                        </div>
                                    </div>
                                </th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody class="ns-attr-new-label">
                            <tr class="ns-null-data">
                                <td colspan="4" align="center">无数据</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <button class="layui-btn layui-btn-primary" onclick="addNewLabel()">添加标签</button>
                </div>
            </div>

            <div class="layui-form-item goods-image-wrap">
                <label class="layui-form-label">详情图片：</label>
                <div class="layui-input-block">
                    <!--商品主图项-->
                    <div class="js-goods-image"></div>
                    <div class="item js-add-goods-image upload_img_square">+</div>
                </div>
                <!--                <div class="item js-add-goods-image upload_img_square">+</div>-->

                <input type="hidden" name="images" value="{$info.images}" />
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详情：</label>
                <div class="layui-input-block">
                    <input type="hidden" name="detail" value="{$info['detail']}" />
                    <script id="editor" type="text/plain" style="width:70%;height:500px;"></script>
                </div>
                <script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/ueditor.config.js"></script>
                <script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/ueditor.all.js"> </script>
                <script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/lang/zh-cn/zh-cn.js"></script>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">排序：</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" autocomplete="off" class="layui-input  ns-len-long" value="{$info.sort}">
                </div>
            </div>
        </div>

        <div class="ns-form-row">
            <button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>

        <input type="hidden" name="label_format" value="{$info['label_format']}" />

        <input type="hidden" name="room_id" value="{$info['room_id']}" />
    </div>
</div>

<script type="text/html" id="houseNumberImage">
    {{# if(d.list.length){ }}
    {{# for(var i=0;i<d.list.length;i++){ }}
    <div class="item upload_img_square_item" data-index="{{i}}">
        <div class="img-wrap">
            <img src="{{ns.img(d.list[i])}}" layer-src>
        </div>
        <div class="operation">
            <i title="图片预览" class="iconfont iconreview js-preview"></i>
            <i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
            <!--            <div class="replace_img img_show" data-index="{{i}}">点击替换</div>-->
        </div>
    </div>
    {{# } }}

    {{# } }}

</script>
{/block}

{block name="script"}

<!-- 优惠券 -->
<script type="text/html" id="couponList">
    <div class="gift-box">
        <div class="ns-single-filter-box">
            <div class="layui-form">
                <div class="layui-input-inline">
                    <input type="text" name="roomNo" placeholder="请输入房间名称" class="layui-input ns-len-mid">
                    <button type="button" class="layui-btn layui-btn-primary" lay-filter="coupon-search" lay-submit>
                        <i class="layui-icon">&#xe615;</i>
                    </button>
                </div>
            </div>
        </div>
        <table id="coupon_list" lay-filter="coupon_list"></table>
    </div>
</script>

<!-- 优惠券-操作 -->
<script type="text/html" id="couponOperation">
    {{# var select_coupon_list = ','+coupon_list+','}}
    {{# if(select_coupon_list.indexOf(','+d.baoyu_id+',') != -1){ }}
    <p title="该房间已参加">已添加</p>
    {{# }else{ }}
    <a class="layui-btn" lay-event="add">添加</a>
    {{# } }}
</script>
<script src="__STATIC__/ext/drag-arrange.js"></script>
<script>
    var ue = UE.getEditor('editor');

    ue.ready(function () {
        ue.setContent($("input[name='detail']").val());
    });

    var goodsLabelFormat = [];//标签
    var houseNumberImage = [];//详情图片

    const GOODS_IMAGE_MAX = 8;//商品主图数量
    var form, repeat_flag, map_class;

    layui.use(['form','laydate','upload','laytpl'], function() {
        var upload = layui.upload;
        var laydate = layui.laydate;
        laytpl = layui.laytpl;
        form = layui.form;
        repeat_flag = false;//防重复标识

        form.render();

        // 加载商品主图
        if ( $("input[name='images']").val()){
            houseNumberImage = $("input[name='images']").val().split(",");
            refresHouseNumberImage();
        }

        isNullTableLabel();

        upload.render({
            elem: '.js-add-goods-image' //绑定元素
            ,url:ns.url('admin/upload/upload')
            ,accept: 'images' //上传图片
            ,multiple: true //允许多文件上传
            ,before: function(obj){
                //do something
                console.error(obj)
            }
            ,done: function(res){
                console.error(res)
                //上传完毕回调
                if(res.code > 0){ //假设成功返回的code为0
                    if (houseNumberImage.length < GOODS_IMAGE_MAX) houseNumberImage.push(res.data.pic_path);
                    refresHouseNumberImage();
                }
            }
            ,error: function(){
                //请求出错处理
            }
        });

        // 门店LOGO
        var store_upload = new Upload({
            elem: '#storeUpload',
            url: ns.url("admin/upload/upload"),
        });


        form.on('submit(save)', function(data){
            data.field.images = houseNumberImage.toString();

            var html;
            ue.ready(function() {   //对编辑器的操作最好在编辑器ready之后再做
                html = ue.getContent();   //获取html内容，返回: <p>hello</p>
            });
            data.field.detail = html;

            data.field.baoyu_id = coupon_list;

            goodsLabelFormat = [];

            // 标签
            $(".ns-attr-new-label .goods-new-attr-tr").each(function (i) {
                var attr_name = $(this).find(".add-attr-name").val();
                var attr_value = $(this).find(".add-attr-value").val();
                var sort = $(this).find(".add-attr-sort").val();
                var attr = {};
                if (attr_name != "" && attr_value != "") {
                    attr.attr_class_id = -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_id = attr.attr_class_id + -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_name = attr_name;
                    attr.attr_value_id = attr.attr_id + -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_value_name = attr_value;
                    attr.sort = sort;
                    goodsLabelFormat.push(attr);
                }
            });

            data.field.label_format = JSON.stringify(goodsLabelFormat);//设置格式

            if(repeat_flag) return;
            repeat_flag = true;

            $.ajax({
                type : "POST",
                dataType: 'JSON',
                url: ns.url("hotel://hotel/room/editRoom"),
                async : true,
                data : data.field,
                success : function(res) {
                    repeat_flag = false;

                    if (res.code == 0) {
                        layer.confirm('编辑成功', {
                            title: '操作提示',
                            btn: ['返回列表', '继续操作'],
                            yes: function() {
                                location.href = ns.url("hotel://hotel/room/lists")
                            },
                            btn2: function() {
                                location.reload();
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            })
        });

    })

    //标签属性
    var goods_label_format = $("input[name='label_format']").val().toString();

    if (goods_label_format) {

        try {
            goodsLabelFormat = JSON.parse(goods_label_format);
        } catch (e) {
            console.log(e);
        }

        var new_attr = [];
        $.each(goodsLabelFormat, function (index, item) {
            if (item.attr_class_id < 0) {
                new_attr.push(item);
            }
        });

        var html = "";

        $.each(new_attr, function (index, item) {
            html += '<tr class="goods-attr-tr goods-new-attr-tr">' +
                '<td>' +
                '<input type="text" class="layui-input add-attr-name" value="' + item.attr_name + '" />' +
                '</td>' +
                '<td>' +
                '<input type="text" class="layui-input add-attr-sort" value="' + item.sort + '" />' +
                '</td>' +
                '<td>' +
                '<div class="ns-table-btn"><a class="layui-btn" onclick="delAttr(this)">删除</a></div>' +
                '</td>' +
                '</tr>';
        });
        $(".ns-attr-new-label").append(html);
    } else {
        var html = '<tr class="ns-null-data"><td colspan="3" align="center">无数据</td></tr>';
        $(".ns-attr-new-label").html(html);
    }

    //渲染门牌号主图列表
    function refresHouseNumberImage() {
        var goods_image_template = $("#houseNumberImage").html();
        var data = {
            list: houseNumberImage,
            max: GOODS_IMAGE_MAX
        };

        laytpl(goods_image_template).render(data, function (html) {

            $(".js-goods-image").html(html);

            //加载图片放大
            loadImgMagnify();

            if (houseNumberImage.length) {

                //预览
                $(".js-goods-image .js-preview").click(function () {
                    $(this).parent().prev().find("img").click();
                });

                //图片删除
                $(".js-goods-image .js-delete").click(function () {
                    var index = $(this).attr("data-index");
                    houseNumberImage.splice(index, 1);
                    refresHouseNumberImage();
                });

                // 拖拽
                $('.js-goods-image .upload_img_square_item').arrangeable({
                    //拖拽结束后执行回调
                    callback: function (e) {
                        var indexBefore = $(e).attr("data-index");//拖拽前的原始位置
                        var indexAfter = $(e).index();//拖拽后的位置
                        var temp = houseNumberImage[indexBefore];
                        houseNumberImage[indexBefore] = houseNumberImage[indexAfter];
                        houseNumberImage[indexAfter] = temp;
                        refresHouseNumberImage();
                    }
                });
            }

            //最多传十张图
            if (houseNumberImage.length < GOODS_IMAGE_MAX) {
                $(".js-add-goods-image").show();
            } else {
                $(".js-add-goods-image").hide();
            }


        });
    }

    function addNewLabel(){
        var html = '<tr class="goods-attr-tr goods-new-attr-tr">' +
            '<td>' +
            '<input type="text" class="layui-input add-attr-name" placeholder="请输入标签名称" />' +
            '</td>' +
            '<td>' +
            '<input type="number" class="layui-input add-attr-sort" value="0" />' +
            '</td>' +
            '<td>' +
            '<div class="ns-table-btn"><a class="layui-btn" onclick="delLabel(this)">删除</a></div>' +
            '</td>' +
            '</tr>';

        $(".ns-attr-new-label").append(html);
        isNullTableLabel();
    }

    // 删除属性
    function delLabel(obj) {
        $(obj).parents("tr").remove();
        isNullTableLabel();
    }

    function isNullTableLabel() {
        var len = $(".ns-attr-new-label .goods-attr-tr").length;
        if (len == 0) {
            $(".ns-attr-new-label").html('<tr class="ns-null-data"><td colspan="4" align="center">无数据</td></tr>');
        } else {
            $(".ns-attr-new-label .ns-null-data").remove();
        }
    }

    function back() {
        location.href = ns.url("hotel://hotel/room/lists");
    }


    $('body').on('click', '.coupon-item .select-coupon', function(e){
        var event = this;

        layer.open({
            type: 1,
            area: ["900px","600px"],
            title: '房间列表',
            skin: 'select-coupon-layer',
            content: $("#couponList").html()
        });

        couponTable = new Table({
            elem: "#coupon_list",
            url: ns.url("hotel://hotel/roomno/lists"),
            where: {'status': 1},
            cols: [
                [{
                    field: 'baoyu_id',
                    title: '房间编号',
                    unresize: 'false',
                    width: '15%'
                }, {
                    field: 'roomNo',
                    title: '房间名称',
                    unresize: 'false',
                    width: '15%'
                },  {
                    title: '操作',
                    toolbar: '#couponOperation',
                    unresize: 'false',
                    align: 'center',
                    width: '10%'
                }]
            ]
        });

        couponTable.tool(function(obj) {
            var data = obj.data;
            switch (obj.event) {
                case "add":
                    addcoupon(data);
                    break;
            }
        });

        function addcoupon(data){
            var template = `<tr data-coupon="{{ d.baoyu_id }}">
				<td>{{ d.baoyu_id }}</td>

				<td>{{ d.roomNo }}</td>

				<td style="text-align:center;"><a href="javascript:;" onclick="deleteCoupon(this)" class="ns-text-color">删除</a></td>
			</tr>`;
            laytpl(template).render(data, function(string){
                $(event).parents('.discount-cont').find('.layui-table tbody').append(string);
                layer.closeAll();
            });
            getCoupon();
        }
    })

    // 删除优惠券
    function deleteCoupon(e){
        $(e).parents('tr').remove();
        getCoupon();
    }
    getCoupon();
    //获取已选中优惠券
    function getCoupon() {
        var coupon = [];
        //if ($('.coupon').find('[value="coupon"]').is(':checked')) {
        $('.coupon').find('tr[data-coupon]').each(function (i, e) {
            coupon.push($(e).attr('data-coupon'));
        })
        //}
        coupon_list = coupon.toString();
    }
</script>
{/block}